import { util } from "./util";

const {ccclass, property} = cc._decorator;

@ccclass
export default class line extends cc.Component {

    @property({type: cc.Node, tooltip: '起点'})
    start_node: cc.Node = null;

    @property({type: cc.Node, tooltip: '重点'})
    end_node: cc.Node = null;

    @property({type: cc.Node, tooltip: '转折点'})
    middle_node: cc.Node = null;

    /** 节点的数组 */
    private node_array: cc.Node[] = [];

    /** 自身的绘制组件 */
    private graphics: cc.Graphics = null;

    /** 贝塞尔曲线直线的显示与否 */
    private show_bezier: boolean = true;

    /** 当前序号 */
    private no: number = 0;

    // onLoad () {}

    start () {

    }

    /**
     * 新建一个贝塞尔曲线
     * @param number 贝塞尔的序号
     * @param poi 上一个贝塞尔的坐标
     */
    new_graphics(number: number, show_bezier: boolean, poi?: cc.Vec2){
        if(poi){
            this.start_node.setPosition(poi);
        }

        this.no = number;

        this.show_bezier = show_bezier;

        //获取绘图组件
        this.graphics = this.getComponent(cc.Graphics);

        this.node_array= [this.start_node,this.end_node,this.middle_node];

        for(let i = 0; i < this.node_array.length; i++){
            this.node_array[i].getChildByName('number').getComponent(cc.Label).string = number.toString();
        }

        this.line();

        //起点是防止上层关闭贝塞尔
        this.start_node.on(cc.Node.EventType.TOUCH_START, this.move_poi, this);
        this.end_node.on(cc.Node.EventType.TOUCH_START, this.move_poi, this);
        this.middle_node.on(cc.Node.EventType.TOUCH_START, this.move_poi, this);

        this.start_node.on(cc.Node.EventType.TOUCH_MOVE, this.move_poi, this);
        this.end_node.on(cc.Node.EventType.TOUCH_MOVE, this.move_poi, this);
        this.middle_node.on(cc.Node.EventType.TOUCH_MOVE, this.move_poi, this);
    }

    /**
     * 绘制出图片的曲线效果
     */
    line(){
        //绘制贝塞尔曲线
        this.graphics.moveTo(this.start_node.x,this.start_node.y);
        this.graphics.lineWidth = 10;
        this.graphics.strokeColor = cc.color(255,0,0,255);
        this.graphics.quadraticCurveTo(this.middle_node.x,this.middle_node.y,this.end_node.x,this.end_node.y);
        this.graphics.stroke();

        if(this.show_bezier == true){
            //绘制直线
            this.graphics.moveTo(this.start_node.x,this.start_node.y);
            this.graphics.lineWidth = 10;
            this.graphics.strokeColor = cc.color(0,255,0,255);
            this.graphics.lineTo(this.middle_node.x,this.middle_node.y);
            this.graphics.stroke();

            //绘制直线2
            this.graphics.moveTo(this.end_node.x,this.end_node.y);
            this.graphics.lineWidth = 10;
            this.graphics.strokeColor = cc.color(0,0,255,255);
            this.graphics.lineTo(this.middle_node.x,this.middle_node.y);
            this.graphics.stroke();
        }
    }

    /**
     * 移动节点
     */
    move_poi(touch: cc.Event.EventTouch){
        this.graphics.clear();
        let node: cc.Node = touch.currentTarget;
        let poi: cc.Vec2 = node.parent.convertToNodeSpaceAR(touch.getLocation());
        node.setPosition(poi);

        this.line();

        //上报自己的坐标和序号
        util.Instance.event_custom(this.node, 'move_', {
            no: this.no,
            pos: [this.start_node.getPosition(),this.end_node.getPosition(),this.middle_node.getPosition()],
        })

        touch.stopPropagation();
    }

    /**
     * 返回结束点坐标
     */
    return_end_poi(){
        return this.end_node.getPosition();
    }

    /**
     * 返回所有的坐标
     */
    return_all_poi(){
        return [this.start_node.getPosition(),this.end_node.getPosition(),this.middle_node.getPosition()];
    }

    /**
     * 尾对齐目标点
     */
    end_widget_poi(poi: cc.Vec2){
        this.graphics.clear();
        this.end_node.setPosition(poi);
        this.line();
    }

    /**
     * 头对齐目标点
     */
    start_widet_poi(poi: cc.Vec2){
        this.graphics.clear();
        this.start_node.setPosition(poi);
        this.line();
    }

    /**
     * 贝塞尔曲线是否显示隐藏直线的绘制
     */
    switch_line(){
        this.show_bezier = !this.show_bezier;
        this.graphics.clear();
        this.line();
    }

    /**
     * 设定新的坐标
     */
    change_pos(pos: cc.Vec2[]){
        for(let i = 0; i < this.node_array.length; i++){
            this.node_array[i].setPosition(pos[i]);
        }

        this.graphics.clear();
        this.line();
    }

    // update (dt) {}
}
